﻿<!DOCTYPE html>
<html lang="zh-cn">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta charset="utf-8" /> 
  <link rel="icon" type="text/css" href="https://orz.red/img/ico.png">
  <title>图片颜色提取</title>
 </head>
 <body>
  <meta name="viewport" content="width=device-width,initial-scale=1" /> 
  <link rel="stylesheet" href="normalize.css" /> 
  <link rel="stylesheet" href="h5bp.css" /> 
  <link rel="stylesheet" href="style.css" /> 
  <script src="jquery-1.9.1.min.js"></script> 
  <main> 
   <section class="info">
    <p>图像处理在当地不会上传。</p> 
   </section> 
   <section class="file-select"> 
    <div class="file-select-button"> 
     <label for="file-select-input">选择图片</label> 
     <input type="file" id="file-select-input" name="fileselect[]" multiple="multiple" /> 
    </div> 
    <div id="filedrag" style="display: block;">
     获取拖拽图片放到这里
    </div> 
   </section> 
   <section class="results"> 
    <div id="error"></div> 
    <h1></h1> 
    <div id="output"> 
    </div> 
   </section> 
   <footer> 
    <p><b>HEX 转换成 RGB</b></p> 
    <input type="text" id="hex-input" placeholder="hex 输入在这" /> 
    <button id="magic-button">点击转换</button> 
    <div id="rgb-output" style="font-size:23px;color:red;"></div> 
    <br /> 
   </footer> 
  </main> 
  <!-- build:js --> 
  <script src="helper.js"></script> 
  <script src="palette.js"></script> 
  <script src="app.js"></script> 
  <script>
        //HEX to RGB convertor
        //jQuery(document).ready(function($){
        $(document).ready(function () {
            $("#magic-button").click(function () {
                $("#rgb-output").html(hex2rgb($("#hex-input").val()));
            });

            $("#hex-input").keyup(function (event) {
                if (event.keyCode == 13) {
                    $("#magic-button").click();
                }
            });
            
        });

        function hex2rgb(colour) {
            var r, g, b;
            if (colour.charAt(0) == '#') {
                colour = colour.substr(1);
            }
            if (colour.length == 3) {
                colour = colour.substr(0, 1) + colour.substr(0, 1) + colour.substr(1, 2) + colour.substr(1, 2) + colour.substr(2, 3) + colour.substr(2, 3);
            }
            r = colour.charAt(0) + '' + colour.charAt(1);
            g = colour.charAt(2) + '' + colour.charAt(3);
            b = colour.charAt(4) + '' + colour.charAt(5);
            r = parseInt(r, 16);
            g = parseInt(g, 16);
            b = parseInt(b, 16);
            return 'rgb(' + r + ',' + g + ',' + b + ')';
        }
        //});
    </script> 
  <!-- endbuild --> 
 </body>
</html>